<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/product.css">
  <style>

  </style>
</head>

<body>

  <!-- 商品展示部分 -->
  <div class="wrapper">
    <!-- 面包屑的导航 -->
    <div class="crumbs">
      <span class="item">首页</span>
      <span>&gt;</span>
      <span class="item">笔记本</span>
    </div>
    <!-- 对内容进行操作 -->
    <div class="operation">
      <ul class="row category">
        <li class="item">分类:</li>
        <li class="item">笔记本</li>
        <li class="item">台式机</li>
        <li class="item">智慧屏</li>
      </ul>
      <div class="row discount">
        <li class="item">服务优惠:</li>
        <li class="item">仅看有货</li>
        <li class="item">分期免息</li>
        <li class="item">优惠商品</li>
      </div>
      <div class="row sort">
        <li class="item">排序:</li>
        <li class="item active">综合</li>
        <li class="item">最新</li>
        <li class="item">评论数</li>
        <li class="item">价格</li>
      </div>
    </div>
    <!-- 商品列表部分 -->
    <ul class="products">

    </ul>
  </div>

  <script src="./json/product_data.js"></script>
  <script>
    var serverURL = 'https://res.vmallres.com/pimages'

    // 1. 动态对的展示商品列表数据
    var productsEl = document.querySelector(".products")
    for (var i = 0; i < resultList.length; i++) {
      var resultItem = resultList[i]
      var itemEl = document.createElement('li')
      itemEl.classList.add('item')
      var serviceString = ""
      for (var label of resultItem.promoLabels) {
        serviceString += `<span class="tip">${label}</span>`
      }
      itemEl.innerHTML = `
      <a href="#">
          <img class="album" src="${serverURL}${resultItem.photoPath}428_428_${resultItem.photoName}" alt="">
          <div class="name">${resultItem.name}</div>
          <div class="discount">${resultItem.promotionInfo}</div>
          <div class="price">¥${resultItem.price}</div>
          <div class="service">
            ${serviceString}
          </div>
          <div class="comment">
            <span>${resultItem.rateCount}人评论</span>
            <span>${resultItem.goodRate}%好评</span>
          </div>
        </a>
      `
      productsEl.append(itemEl)
    }
  </script>
</body>

</html>